<template>
  <page-header-wrapper>
  <div>
    <div class="page-card">
      <h-query :showKey="[]" :query="query" @search="search">
      
      </h-query>
    </div>
    <div class="page-card">
      <!-- <h-query :showKey="[]" :query="query" @search="search">
        <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添 加</a-button>
      </h-query> -->
      <div class="a-button-right">
        <UploadExcel action="/web/Enforcement/read_Enforcement" download="/web/Enforcement/write_Enforcement" @change="$refs.htable.refresh(true)" />
        <a-button type="primary" @click="actions">抽 签</a-button>
        <!-- <a-button type="primary" @click="showHistoryAct">抽签历史记录</a-button> -->
        <a-button type="primary" @click="add">添 加</a-button>
      </div>
      <h-table
        ref="htable"
        @init="getList"
        :config="config"
        :showHeadBgNone="true"
        :zebraStripes="true">
        <span slot="type" slot-scope="{text}">
          {{ type[text] }}
        </span>
        <span slot="examine" slot-scope="{text}">
          <span class="green" v-if="text == 1">已通过</span>
          <span class="red" v-else-if="text == 2">未通过</span>
          <span v-else>未审核</span>
        </span>
        <span slot="action" slot-scope="{text, record}">
          <a @click="look(record)">查看</a>
          <a-divider type="vertical"></a-divider>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a @click="remove(record)" class="red">删除</a>
        </span>
        <!-- <span slot="isHome" slot-scope="{text, record}">
          <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
        </span>
        <span slot="isIndex" slot-scope="{text, record}">
          <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
        </span> -->
      </h-table>
    </div>
  </div>
  <a-modal title="抽签" v-model="show" width="900px" class="custom-modal">
    <a-form-model ref="ruleForm" :model="form" :labelCol="{span: 12 }" :wrapperCol="{span: 12}" :rules="rules">
      <!-- <a-form-model-item label="状态" prop="examine">
        <a-select v-model="form.examine">
          <a-select-option value="0">未审核</a-select-option>
          <a-select-option value="1">已通过</a-select-option>
          <a-select-option value="2">未通过</a-select-option>
        </a-select>
      </a-form-model-item> -->
      <a-row>
          <a-col :span="8">
            <a-form-model-item label="专家类型" prop="type">
              <a-select v-model="form.type" placeholder="请选择专家类型">
                <a-select-option value="0">网络专家</a-select-option>
                <a-select-option value="1">司法专家</a-select-option>
                <a-select-option value="2">行政专家</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="请输入抽签人数" prop="sum">
              <a-input-number style="width: 80%" v-model="form.sum" placeholder="请输入人数"></a-input-number>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="">
              <a-button type="primary" @click="submit" style="margin-left: 12px">开始摇号</a-button>
            </a-form-model-item>

          </a-col>
        </a-row>
      <h-table
        ref="htable2"
        :config="config3">

      </h-table>

    </a-form-model>
    <template slot="closeIcon">
      <div @click.stop="showHistoryAct">
        抽签历史 <a-icon style="font-size: 14px" type="right" />
      </div>
    </template>
    <template slot="footer">
      <a-button type="primary" @click="show = false">确定</a-button>
    </template>
  </a-modal>
  <a-modal title="抽签历史记录" width="800px" v-model="showHistory" @ok="showHistory=false">
    <h-table
        ref="htable2"
        @init="getListHistory"
        :config="config2">
        <span slot="action" slot-scope="{text, record}">
          <a @click="showDetail(record)">查看详情</a>
        </span>
      </h-table>
  </a-modal>
  <a-modal title="抽签历史记录" width="800px" v-model="showHistoryDetail">
    <p>抽签时间：{{detailForm.createTime}} <span style="margin: 0 10px"></span> 抽签人数：{{detailForm.sum}}</p>
    <h-table
      ref="htable3"
      @init="getListHistoryDetail"
      :config="config3">
    </h-table>
    <template slot="footer">
      <a-button key="back" @click="showHistoryDetail = false">
        确定
      </a-button>
    </template>
  </a-modal>
  </page-header-wrapper>
</template>
<script>
// eslint-disable-next-line
import { getEnforcement, getEnforcementDetail, addEnforcement, deleteEnforcement, editEnforcement, getEnforcementHistoryById, getEnforcementHistory, getEnforcementRandom } from '@/api/db';
import createInfo from './action/createInfo';
import UploadExcel from '@/components/UploadExcel/Index'

export default {
  components: {
    createInfo,
    UploadExcel
  },
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          {
            align: 'center',
            title: '单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '职务',
            dataIndex: 'post'
          },
          {
            align: 'center',
            title: '职称',
            dataIndex: 'title'
          },
          {
            align: 'center',
            title: '审核状态',
            dataIndex: 'examine',
            scopedSlots: { customRender: 'examine' }
          },
          {
            align: 'center',
            title: '资历',
            dataIndex: 'qualifications'
          },
          {
            align: 'center',
            title: '参与项目',
            dataIndex: 'project'
          },
          {
            align: 'center',
            title: '备注',
            dataIndex: 'remark',
            width: 240
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100,
          // showSizeChanger: true,
          // showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }
      },
      config2: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 400
        },
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'order'
          },
          {
            align: 'center',
            title: '抽签时间',
            dataIndex: 'createTime'
          },
          {
            align: 'center',
            title: '抽签人数',
            dataIndex: 'sum'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: false
      },
      config3: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 400
        },
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'order'
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          {
            align: 'center',
            title: '单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '职务',
            dataIndex: 'post'
          },
          {
            align: 'center',
            title: '职称',
            dataIndex: 'title'
          },
          {
            align: 'center',
            title: '资历',
            dataIndex: 'qualifications'
          },
          {
            align: 'center',
            title: '参与项目',
            dataIndex: 'project'
          },
        ],
        pagination: false
      },
      form: {
        examine: '1'
      },
      type: {
        0: '个人',
        1: '企业'
      },
      query: [
        {
          key: 'name',
          type: 'input',
          label: '姓名'
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        examine: '1'
      },
      show: false,
      showHistory: false, 
      showHistoryDetail: false,
      rules: {
        sum: [{ required: true, message: '请输入' }],
        examine: [{ required: true, message: '请选择' }],
        type: [{ required: true, message: '请选择' }]
      },
      detailForm: {}
    };
  },
  methods: {
    showDetail({lotteryId, sum, createTime}) {
      this.showHistoryDetail = true
      this.detailForm = {lotteryId, sum, createTime}
      this.$nextTick(() => {
        this.$refs.htable3.refresh()
      })
    },
    showHistoryAct() {
      this.showHistory = true
      this.$nextTick(() => {
        this.$refs.htable2.refresh()
      })
    },
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getEnforcement(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    getListHistory(params) {
      Object.assign(this.queryParams, params);
      getEnforcementHistory(this.queryParams).then(res => {
        this.config2.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        // this.config.pagination.total = res.data.total;
      });
    },
    getListHistoryDetail(params) {
      getEnforcementHistoryById(this.detailForm).then(res => {
        this.config3.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        // this.config.pagination.total = res.data.total;
      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    add() {
      this.$router.push({path: '/db/enforcement/edit'})
    },
    edit({id}) {
      this.$router.push({path: '/db/enforcement/edit', query: { id  }})
    },
    look({id}) {
      this.$router.push({path: '/db/enforcement/edit', query: { id, type: 'detail' }})
    },
    actions() {
      this.show = true
    },  
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          getEnforcementRandom({...this.form, examine: this.queryParams.examine}).then(res => {
            this.$message.success('抽签完成！')
            // this.show = false
            this.$refs.htable.refresh()
            this.config3.dataSource = res.data.map((e, i) => {
              return {
                ...e,
                order: i + 1
              };
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '确定要删除吗？',
        onOk() {
          deleteEnforcement({ id, isDelete: -1 }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
  }
};
</script>
<style lang="less">
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }
}
.custom-modal {
  .ant-modal-close {
    width: auto !important;
    text-align: right;
    line-height: 56px;
    right: 12px;
    color: #333;
    &:hover {
      color: #1890ff;
    }
  }
  .ant-modal-close-x {
    text-align: right;
    width: 100% !important;
  }
}
</style>
